import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入通用组件
import CommonComponents from './components/common'

// 导入样式
import './assets/styles/main.css'
import './assets/styles/mobile.css'

// 导入Toast服务
import ToastPlugin from './utils/toast'

// 引入Vant样式和移动端适配
import 'vant/lib/index.css'
import { Toast, Dialog, Tabbar, TabbarItem, FloatingBubble } from 'vant'

// 检测设备类型并设置到store
const checkDeviceType = () => {
  const isMobile = window.innerWidth < 768
  store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
}

// 初始检测
checkDeviceType()

// 监听窗口大小变化
window.addEventListener('resize', checkDeviceType)

const app = createApp(App)

// 注册通用组件
app.use(CommonComponents)

// 注册Toast服务
app.use(ToastPlugin)

// 注册移动端专用组件
import MobileCard from './components/card/MobileCard.vue'
import MobileUpload from './components/form/MobileUpload.vue'
import BottomNav from './components/navigation/BottomNav.vue'

app.component('MobileCard', MobileCard)
app.component('MobileUpload', MobileUpload)
app.component('BottomNav', BottomNav)

// 注册全局组件和插件
app.use(store)
app.use(router)

// 注册Vant组件
app.use(Toast)
app.use(Dialog)
app.use(Tabbar)
app.use(TabbarItem)
app.use(FloatingBubble)

app.mount('#app') 